<template>
  <div>
    <page-main>
      <h2>巡查记录</h2>
      <el-timeline>
        <el-timeline-item :timestamp="item.add_time" placement="top" v-for="(item, index) in timelineList" :key="index">
          <el-card>
            <el-descriptions :column="3" :size="size" border>
              <el-descriptions-item>
                <template #label> 点位名称 </template>
                {{ item.point_name || "" }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label> 点位地址 </template>
                {{ item.point_address || "" }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label> 网格员 </template>
                {{ item.name || "" }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label> 巡查点地址 </template>
                {{ item.point_address || "" }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label> 建筑物名称 </template>
                {{ item.build_name || "" }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label> 建筑楼栋编号 </template>
                {{ item.building_id || "" }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label> 巡查问题与答案 </template>
                <div v-for="(iitem, iindex) in item.result" :key="iindex">
                  <h4>{{ iitem.question || "" }}</h4>
                  <h5>{{ iitem.awser || "" }}</h5>
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label> 故障信息 </template>
                {{ item.fault || "" }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label> 备注 </template>
                {{ item.remark || "" }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label> 巡查视频 </template>

                <el-popover placement="right" :width="500" trigger="click" @hide="videoPlayHide"
                  @show="videoPlayShow(item.video)">
                  <template #reference>
                    <el-button type="primary" icon="el-icon-video-play" circle></el-button>
                  </template>
                  <div style="width: 500px; height: 240px;">
                    <video width="500" height="240" controls="controls" ref="videoPlay">
                      <source :src="videoUrl" type="video/ogg" />
                      <source :src="videoUrl" type="video/mp4" />
                      <source :src="videoUrl" type="video/webm" />
                      <object :data="videoUrl" width="320" height="240"></object>
                    </video>
                  </div>
                </el-popover>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </page-main>
    <div class="block">
      <el-pagination @current-change="handleCurrentChange" v-model:currentPage="timelineListInfo.page"
        :page-count="timelineListInfo.total_page" :total="timelineListInfo.total"
        layout="total,prev, pager, next, jumper" background>
        <!-- :hide-on-single-page="true" -->
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timelineList: [
        {
          id: 1,
          unit_id: 1,
          region_id: 510700,
          area_id: 1,
          task_id: 1,
          point_id: 1,
          unit_user_id: 1,
          xf_user_id: 0,
          name: "芦丽华",
          images: "",
          video: "",
          question: [
            {
              question: 1,
              awser: 1,
            },
            {
              question: 1,
              awser: 1,
            },
          ],
          result: [
            {
              question: "问题1",
              awser: "答案1",
            },
            {
              question: "问题1",
              awser: "答案1",
            },
          ],
          fault: "",
          remark: "",
          add_time: "2020-02-24 00:00:00",
          real_name: "额温枪翁",
          username: "3232323",
          point_name: "楼梯口",
          point_address: "拉萨海港区",
          building_id: 1,
          build_name: "三台县社会福利院大厦",
          build_address: "绵阳市",
        },
        {
          id: 2,
          unit_id: 1,
          region_id: 510700,
          area_id: 1,
          task_id: 1,
          point_id: 1,
          unit_user_id: 1,
          xf_user_id: 0,
          name: "戚龙",
          images: "",
          video: "",
          question: [
            {
              question: 2,
              awser: 2,
            },
            {
              question: 2,
              awser: 2,
            },
          ],
          result: [
            {
              question: "问题2",
              awser: "答案2",
            },
            {
              question: "问题2",
              awser: "答案2",
            },
          ],
          fault: "",
          remark: "",
          add_time: "2020-01-14 00:00:00",
          real_name: "额温枪翁",
          username: "3232323",
          point_name: "楼梯口",
          point_address: "拉萨海港区",
          building_id: 1,
          build_name: "三台县社会福利院大厦",
          build_address: "绵阳市",
        },
        {
          id: 3,
          unit_id: 1,
          region_id: 510700,
          area_id: 1,
          task_id: 1,
          point_id: 1,
          unit_user_id: 1,
          xf_user_id: 0,
          name: "季亮",
          images: "",
          video: "",
          question: [
            {
              question: 3,
              awser: 3,
            },
            {
              question: 3,
              awser: 3,
            },
          ],
          result: [
            {
              question: "问题3",
              awser: "答案3",
            },
            {
              question: "问题3",
              awser: "答案3",
            },
          ],
          fault: "",
          remark: "",
          add_time: "2020-02-15 00:00:00",
          real_name: "额温枪翁",
          username: "3232323",
          point_name: "楼梯口",
          point_address: "拉萨海港区",
          building_id: 1,
          build_name: "三台县社会福利院大厦",
          build_address: "绵阳市",
        },
        {
          id: 4,
          unit_id: 1,
          region_id: 510700,
          area_id: 1,
          task_id: 1,
          point_id: 1,
          unit_user_id: 1,
          xf_user_id: 0,
          name: "夏东",
          images: "",
          video: "",
          question: [
            {
              question: 4,
              awser: 4,
            },
            {
              question: 4,
              awser: 4,
            },
          ],
          result: [
            {
              question: "问题4",
              awser: "答案4",
            },
            {
              question: "问题4",
              awser: "答案4",
            },
          ],
          fault: "",
          remark: "",
          add_time: "2020-03-13 00:00:00",
          real_name: "额温枪翁",
          username: "3232323",
          point_name: "楼梯口",
          point_address: "拉萨海港区",
          building_id: 1,
          build_name: "三台县社会福利院大厦",
          build_address: "绵阳市",
        },
        {
          id: 5,
          unit_id: 1,
          region_id: 510700,
          area_id: 1,
          task_id: 1,
          point_id: 1,
          unit_user_id: 1,
          xf_user_id: 0,
          name: "王",
          images: "",
          video: "",
          question: null,
          result: null,
          fault: "",
          remark: "",
          add_time: "2021-09-08 09:47:25",
          real_name: "额温枪翁",
          username: "3232323",
          point_name: "楼梯口",
          point_address: "拉萨海港区",
          building_id: 1,
          build_name: "三台县社会福利院大厦",
          build_address: "绵阳市",
        },
      ],
      timelineListInfo: "",
      videoUrl: "",
      point_id: ""
    };
  },
  created() {
    this.point_id = this.$route.query.id
    this.getLists()
  },
  methods: {
    videoPlayHide() {
      this.$refs.videoPlay.pause()
    },
    videoPlayShow(url) {
      this.videoUrl = url
    },
    handleCurrentChange(e) {
      this.getLists(e);
    },
    getLists(page) {
      let pageNum = 1;
      if (page) {
        pageNum = page;
      }
      this.$api
        .post("/unit/PatrolRecord/listsRecord", {
          point_id: this.point_id,
          page: pageNum,
          rows: 4,
        })
        .then((res) => {
          //   this.timelineList = res.data.lists;
          let temp = res.data
          delete temp.lists
          //   this.timelineListInfo = res.data;
        });
    },
  }
};
</script>


